<template>
    <div class="col card p10">
        <label class="title">测试放水</label>
        <div class="row_center mt">
            <label class="less">放水策略:</label>
            <el-select
                style="width: 120px;"
                v-model="ctx.proxy">
                <el-option
                    :label="TANK1"
                    :value="TANK1"/>
                <el-option
                    :label="TANK2"
                    :value="TANK2"/>
                <el-option
                    :label="TANK1_2"
                    :value="TANK1_2"/>
                <el-option
                    :label="AUTO"
                    :value="AUTO"
                    />
            </el-select>
        </div>
        <div class="row_center mt">
            <label class="less">放水体积:</label>
            <el-input v-model="ctx.volume" size="small" style="width: 80px;"/>
            <label>ml</label>
        </div>
        <el-button @click="onClickDrain" class="mt" type="primary">放水</el-button>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dialog } from '../../service/ui';
import { drain_water } from '../../service/heat_cmd';

const TANK1 = "加热罐1";
const TANK2 = "加热罐2";
const TANK1_2 = "加热罐1和2";
const AUTO = "自动";

interface Ctx {
    proxy: string,
    volume: string,
}

const ctx = reactive<Ctx>({
    proxy: AUTO,
    volume: '50'
});

async function onClickDrain() {

    let proxy = 1;
    if (ctx.proxy == TANK2) {
        proxy = 2;
    } else if (ctx.proxy == TANK1_2) {
        proxy = 3;
    } else if (ctx.proxy == AUTO) {
        proxy = 4;
    }

    try {
        const volume = parseInt(ctx.volume);
        await drain_water(proxy, volume);
        dialog.succ('放水完成');
    } catch (msg) {
        dialog.err(msg);
    }
}

</script>
